<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<!--
    对于插槽的理解:
        当我们自己定义了 标签组件, 在 自定义标签组件 中的文本内容在 自定义标签的指定位置显示出来
-->
<div id="app">
    <lk-box>
        <button>插槽替换</button>
    </lk-box>

    <lk-box>
        <input />
    </lk-box>

    <lk-box></lk-box>
</div>

<template id="box">
    <div style="background-color: #846f74; width: 400px; height: 200px;margin-top: 20px">
        <h2>Box</h2>
        <p>子组件 Box</p>
        <slot>默认内容</slot>
    </div>
</template>
</body>
<script src="js/vue.js"></script>
<script>

    const lkBox = {
        data() {
            return {
                boxMsg: "来自 Box 中的消息"
            };
        },
        template: `#box`,   // 这里必须要使用 `` 符号作为字符串
        methods: {
            btnCallback() {
                console.log("box 中 button 调用");
            }
        }
    };

    const app = Vue.createApp({
        data() {
            return {
                "msg": "aaa"
            }
        },
        components: {
            "lk-box": lkBox
        }
    }).mount("#app");
</script>
</html>
